<template>
  <div class="complaint app-container">
    <el-row>
      <el-input
        v-model="searchKey.complaintOrg"
        placeholder="请输入投诉单位"
        style="width: 200px"
        class="mr-15px mb-15px"
        clearable
      ></el-input>
      <el-select
        v-model="searchKey.beComplaintOrg"
        placeholder="请选择被诉单位"
        style="width: 200px"
        class="mr-15px"
        clearable
        :disabled="deptDisabled"
      >
        <el-option
          v-for="(item, index) in deptOptions"
          :value="item.value"
          :label="item.label"
          :key="index"
        ></el-option>
      </el-select>
      <el-select
        v-model="searchKey.judge"
        placeholder="请选择投诉判定"
        style="width: 200px"
        class="mr-15px"
        clearable
        ><el-option value="0" label="无效投诉"> </el-option>
        <el-option value="1" label="有效投诉"> </el-option
      ></el-select>
      <div style="width: 240px" class="mr-15px">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="到"
          start-placeholder="受理时间起"
          end-placeholder="受理时间止"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </div>
      <el-select
        v-model="searchKey.stage"
        placeholder="请选择状态"
        style="width: 200px"
        class="mr-15px"
        clearable
        ><el-option
          v-for="(item, index) in complaint_stage"
          :key="index"
          :value="item.value"
          :label="item.label"
        ></el-option
      ></el-select>
      <div class="mb-15px">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </el-row>
    <el-row class="mb-15px">
      <el-button
        type="primary"
        v-hasPermi="['quality:complaint:add']"
        @click="addComplaint"
        icon="Plus"
        >录入</el-button
      >
      <el-button
        @click="deleteRow"
        icon="Delete"
        v-hasPermi="['quality:complaint:add']"
        :disabled="hasColumn"
        >删除</el-button
      >
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      stripe
      border
      @row-dblclick="dbclickRow"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column label="投诉单位" prop="complaintOrg"></el-table-column>
      <el-table-column
        label="被诉单位"
        prop="beComplaintOrgCn"
      ></el-table-column>
      <el-table-column label="投诉人" prop="complaintPerson"></el-table-column>
      <el-table-column
        label="被诉人"
        prop="beComplaintPersonCn"
      ></el-table-column>
      <el-table-column
        label="联系电话"
        prop="contactNumber"
        width="120"
      ></el-table-column>
      <el-table-column label="投诉判定" prop="judge" width="90">
        <template #default="scoped">
          <div>
            {{
              scoped.row.judge === '0'
                ? '无效判定'
                : scoped.row.judge === '1'
                ? '有效判定'
                : ''
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="stage" width="120">
        <template #default="scoped">
          <div>
            {{ complaint_stage.find(v => v.value === scoped.row.stage)?.label }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="190" align="center">
        <template #default="scoped">
          <div>
            <el-button
              type="primary"
              text
              @click="dealWithHandle(scoped.row)"
              v-if="btnShow(scoped.row, false)"
              >{{ btnName(scoped.row.stage) }}</el-button
            >
            <el-button
              type="primary"
              text
              @click="backPreviousOne(scoped.row)"
              v-if="btnShow(scoped.row, true)"
              >退回</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="searchKey.pageNum"
      v-model:limit="searchKey.pageSize"
      @pagination="getList"
    />

    <ComplaintDialog
      :title="dialogTitle"
      v-model:show="show"
      :dialog-type="dialogType"
      :complaintDetail="complaintDetail"
      :status="status"
      @getList="getList"
    />
  </div>
</template>

<script setup>
import ComplaintDialog from './dialog.vue'
import useUserStore from '@/store/modules/user'
import { complaint_stage } from '@/hooks/dict/contract'
import { treeselectNoPriv } from '@/api/rsgl/zzjg'
import {
  getComplaintList,
  getComplaintDetail,
  editComplaint,
  backComplaint
} from '@/api/ord'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const deptOptions = ref([])
const deptDisabled = ref(false)
function getInitData() {
  treeselectNoPriv({ parentId: 100 }).then(res => {
    if (userStore.userInfo.orgId == '484') {
      deptOptions.value = res.data.map(v => ({
        value: v.id,
        label: v.label
      }))
    } else {
      searchKey.value.beComplaintOrg = userStore.userInfo.orgId
      deptDisabled.value = true
      deptOptions.value = res.data
        .filter(v => {
          if (v.id == userStore.userInfo.orgId) {
            return v
          }
        })
        .map(v => ({ value: v.id, label: v.label }))
    }
  })
}
getInitData()
const searchKey = ref({ pageNum: 1, pageSize: 10 })
const time = ref()
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
function getList() {
  if (time.value) {
    searchKey.value.searchBegin = time.value[0]
    searchKey.value.searchEnd = time.value[1]
  } else {
    searchKey.value.searchBegin = ''
    searchKey.value.searchEnd = ''
  }
  if (userStore.userInfo.orgId != '484') {
    searchKey.value.beComplaintOrg = userStore.userInfo.orgId
  }
  Object.keys(searchKey.value).forEach(v => {
    if (!searchKey.value[v]) {
      delete searchKey.value[v]
    }
  })
  loading.value = true
  getComplaintList(searchKey.value)
    .then(res => {
      tableData.value = res.data.records
      total.value = res.data.total
    })
    .finally(() => {
      loading.value = false
    })
}

function reset() {
  searchKey.value = { pageNum: 1, pageSize: 10 }
  time.value = null
  if (userStore.userInfo.orgId != '484') {
    searchKey.value.beComplaintOrg = userStore.userInfo.orgId
  }
  getList()
}

const btnName = computed(status => status => {
  switch (Number(status)) {
    case 1:
      return '核实'
    case 2:
      return '录入意见'
    case 3:
      return '处理'
    case 4:
      return '确认'
    // case 5:
    //   return '回访'
    default:
      return '按钮'
  }
})

// 按钮权限控制
const btnShow = computed((status, isBack) => (status, isBack) => {
  let flag = status != '6'
  if (isBack) {
    flag = status.stage != '1' && status.stage != '6'
  }

  switch (Number(status.stage)) {
    case 1:
      return flag && status.beComplaintOrg == userStore.userInfo.orgId
    case 2:
      return flag && status.beComplaintOrg == userStore.userInfo.orgId
    case 3:
      return flag && status.beComplaintOrg == userStore.userInfo.orgId
    case 4:
      return flag && status.orgId == userStore.userInfo.orgId
    // case 5:
    //   return flag && status.orgId == userStore.userInfo.orgId
  }
})

function dealWithHandle(row) {
  status.value = String(Number(row.stage))
  dialogType.value = 'edit'
  getDetails(row)
}

function backPreviousOne(row) {
  proxy.$modal.confirm('是否确认回退该条数据？').then(() => {
    backComplaint({ id: row.id, isAll: '0' }).then(res => {
      proxy.$modal.msgSuccess('退回成功')
      getList()
    })
  })
}
// 双击查看详情
const status = ref('0')
const complaintDetail = ref({})
function dbclickRow(row, column, event) {
  dialogType.value = 'details'
  status.value = row.stage
  getDetails(row)
}

function getDetails(row) {
  getComplaintDetail({ id: row.id }).then(res => {
    dialogTitle.value = '投诉单详情'
    show.value = true
    complaintDetail.value = res.data
  })
}

// 表格选择
const selectRow = ref()
function handleSelectionChange(row) {
  hasColumn.value = row.length !== 1
  selectRow.value = row[0]
}
const dialogTitle = ref('新增投诉单')
const show = ref(false)
const dialogType = ref('add')
function addComplaint() {
  show.value = true
  dialogType.value = 'add'
  dialogTitle.value = '新增投诉单'
  status.value = '0'
  complaintDetail.value = {}
}
const hasColumn = ref(true)
function deleteRow() {
  if (selectRow.value.stage === '6') {
    proxy.$modal.msgError('该投诉单已处理完成，无法删除')
    return
  }
  proxy.$modal.confirm('是否确实删除').then(() => {
    backComplaint({ id: selectRow.value.id, isAll: '1' }).then(res => {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    })
  })
}

getList()
</script>

<style scoped lang="scss">
.complaint {
  textarea {
    resize: none;
  }
  ::v-deep(.comDialog .el-dialog__body) {
    max-height: 600px;
    overflow: auto;
  }
}
</style>
